<template>
	<view class="pull-user-list" :class="themeName">
		<!-- Tabs -->
		<navbar title="拉新数据"></navbar>

		<view class="poster-line flex row-center">
			<view class="flex" @click="shareSheetShow=true">
				<u-icon name="share" size="38" color="#000" />
				<text class="m-l-10">{{$zhTran('获取海报分享')}}</text>
			</view>
		</view>

		<view class="query-line flex row-between">
			<view class="flex" @click="chooseType">
				<text>{{type.desc}}</text>
				<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
			</view>
			<view class="flex" @click="chooseStatus">
				<text>{{status.desc}}</text>
				<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
			</view>
		</view>

		<!-- Order Lists -->
		<view class="order-item">
			<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: $zhTran('暂无数据'),
				  	fixed: true
				  }
			  }" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="order-contain">
					<view class="order" v-for="item,idx in clientList" :key="idx ">
						<!-- Order Header -->

						<view class="order-header">
							<view class="order-sn">{{$zhTran('类型')}}: {{ item.type_desc }}</view>
							<view class="'order-status'">{{ item.status_desc }} </view>
						</view>

						<view class="order-main">
							<view class="name m-b-10">{{item.user_nickname}}</view>
							<view class="flex row-between m-b-10">
								<view class="muted xs flex">{{$zhTran('拉新奖励')}}: <view class="amount">￥{{item.reward}}
									</view>
								</view>
								<view class="muted xs">{{$zhTran('拉新等级')}}：{{item.level_desc}}</view>
							</view>
							<view class="flex">
								<view class="muted xs m-r-10">{{$zhTran('拉新时间')}}:</view>
								<view class="muted xs"> {{item.create_time}}</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

		<u-popup v-model="showVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePopup">
			<view class="sort-box">
				<view class="sort-header">{{$zhTran(mode == 'type'?'拉新类型':'拉新状态')}}</view>
				<view class="sort-main" v-if="mode == 'type'">
					<view :class="type.value === ''?'selected sort-sel':' sort-sel'" @click="typeList('','全部类型')">
						{{$zhTran('全部类型')}}
					</view>
					<view :class="type.value === 0?'selected sort-sel':' sort-sel'" @click="typeList(0,'用户海报')">
						{{$zhTran('用户海报')}}
					</view>
					<view :class="type.value === 1?'selected sort-sel':' sort-sel'" @click="typeList(1,'团长海报')">
						{{$zhTran('团长海报')}}
					</view>
				</view>
				<view class="sort-main" v-else>
					<view :class="status.value === ''?'selected sort-sel':' sort-sel'" @click="statusList('','全部状态')">
						{{$zhTran('全部状态')}}
					</view>
					<view :class="status.value === 0?'selected sort-sel':' sort-sel'" @click="statusList(0,'待奖励')">
						{{$zhTran('待奖励')}}
					</view>
					<view :class="status.value === 1?'selected sort-sel':' sort-sel'" @click="statusList(1,'已奖励')">
						{{$zhTran('已奖励')}}
					</view>
				</view>
				<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
				<view class="sort-footer">
					<button hover-class="none" class="btn btn--cancel" size="md"
						@tap="showVisible=false">{{$zhTran("取消")}}</button>
				</view>
			</view>
		</u-popup>

		<u-action-sheet :list="posterList" v-model="shareSheetShow" @click="actionSheet"></u-action-sheet>

		<u-popup v-model="sharePosterVisible" mode="center" width="90%">
			<share-poster ref="poster" :options="options" @success="handleSuccess" @complete="handleComplete" />
			<u-gap height="100"></u-gap>
		</u-popup>
		<view class="share-btns" v-if="sharePosterVisible">
			<view class="text-center">
				<view class="title">{{$zhTran('- 转发好友或保存至手机 -')}}</view>
				<view class="desc">{{$zhTran('保存海报后，即可分享给客户、客户群和微信朋友圈')}}</view>
				<view class="close">
					<u-icon name="close" color="#666666" @tap="sharePosterVisible = false" />
				</view>
			</view>
			<view class="flex row-between">
				<view class="btns share" @click="saveImageToOther">{{$zhTran('转发好友')}}</view>
				<view class="btns saveImg" @click="saveImageToAlbum">{{$zhTran('保存至手机')}}</view>
			</view>
		</view>
		<loading-view v-show="loading"></loading-view>
	</view>
</template>


<script>
	import {
		apiCitySupplierPullUserList
	} from '@/api/citysupplier'
	import {
		apiMnpCitySupplierPullUserQrCode
	} from "@/api/app";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import sharePoster from "@/bundle2/pages/citysupplier/share_poster.vue";
	export default {
		name: 'OrderList',
		mixins: [MescrollMixin],
		components: {
			sharePoster,
		},

		data() {
			return {
				csppl_id: '',
				csppl_name: '',
				clientList: [],
				showVisible: false,
				type: {
					value: '',
					desc: this.$zhTran('全部类型'),
				},
				status: {
					value: '',
					desc: this.$zhTran('全部状态'),
				},
				mode: '',
				orderStatus: {
					0: {
						name: this.$zhTran('待奖励'),
						style: 'primary',
					},
					1: {
						name: this.$zhTran('已奖励'),
						style: 'primary',
					},
				},
				posterList: [],
				shareSheetShow: false,
				loading: false,
				options: {
					avatar: '',
					user_name: '',
					csppl_name: '',
					share_image: '',
					qr_code: ''
				},
				imgPath: '',
				sharePosterVisible: false,
			}
		},

		computed: {},

		methods: {
			// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCitySupplierPullUserList({
					type: this.type.value,
					status: this.status.value,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					count,
					extend
				}) => {
					if (num === 1) this.clientList = []
					this.clientList = [...this.clientList, ...lists]
					this.posterList = extend.posterList
					if (this.posterList.length > 0)
						this.posterList.forEach((item) => {
							item.text = item.type_desc + (item.type ? '' : '(' + item.level_desc + ')')
						})
					this.clientList = this.$zhTran(this.clientList)
					this.posterList = this.$zhTran(this.posterList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},

			closePopup() {
				this.showVisible = false
			},
			chooseStatus() {
				this.mode = 'status'
				this.showVisible = true
			},
			statusList(row, desc) {
				this.status.value = row
				this.status.desc = this.$zhTran(desc)
				this.refreshOrderData()
				this.closePopup()
			},
			chooseType() {
				this.mode = 'type'
				this.showVisible = true
			},
			typeList(row, desc) {
				this.type.value = row
				this.type.desc = this.$zhTran(desc)
				this.refreshOrderData()
				this.closePopup()
			},
			actionSheet(event) {
				console.log(event)
				this.shareSheetShow = false
				this.loading = true
				this.options = {
					avatar: this.userInfo.avatar,
					user_name: this.userInfo.nickname,
					csppl_name: this.csppl_name,
					share_image: this.posterList[event].poster,
				}
				this.getPoster(event)
			},
			async getPoster(event) {
				try {
					const res = await Promise.all([
						// #ifdef MP-WEIXIN
						apiMnpCitySupplierPullUserQrCode({
							poster_type: this.posterList[event].type,
							poster_level: this.posterList[event].level_id
						})
						// #endif
					]);
					console.log('res', res)
					// #ifdef MP-WEIXIN
					this.options.qr_code = res[0]?.qr_code;
					// #endif
					console.log('options', this.options)
					this.$nextTick(() => {
						this.$refs.poster.drawCanvas();
					})
				} catch (e) {
					this.$toast({
						title: e,
					});
				} finally {
					this.loading = false
				}
			},
			handleSuccess(val) {
				console.log('handleSuccess', this.imgPath)
				this.imgPath = val;
				this.sharePosterVisible = true
				this.loading = false
			},
			handleComplete() {
				console.log('handleComplete')
				this.loading = false
			},
			saveImageToOther() {
				console.log('imgPath', this.imgPath)
				uni.showShareImageMenu({
					path: this.imgPath
				})
			},
			saveImageToAlbum() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.imgPath,
					success: (res) => {
						this.$toast({
							title: this.$zhTran("保存成功"),
						});
					},
					fail: (err) => {
						this.$toast({
							title: this.$zhTran("保存失败"),
						});
					},
				});
				// #endif
				// #ifdef H5
				this.$toast({
					title: this.$zhTran("请长按图片保存"),
				});
				// #endif
			},
			cancelShare() {
				this.sharePosterVisible = false
			}
		},
		onLoad() {
			const options = this.$Route.query
			console.log(options)
			this.csppl_id = options.csppl_id
			this.csppl_name = this.$zhTran(options.csppl_name)

			this.refreshOrderData()
			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.pull-user-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.poster-line {
			padding: 20rpx 40rpx;
			margin: 20rpx 20rpx 0 20rpx;
			border-radius: 5px;
			background-color: #FFFFFF;
		}

		.query-line {
			padding: 20rpx 40rpx;
			margin: 20rpx 20rpx 0 20rpx;
			border-radius: 5px;
			background-color: #FFFFFF;
		}

		.order-item {
			flex: 1;
			min-height: 0;
		}
	}

	.order-contain {
		padding: 0 20rpx;
	}

	.order {
		padding: 0 20rpx;
		margin-top: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;

		&-header {
			display: flex;
			height: 80rpx;
			align-items: center;
			padding: 30rpx;
			border-bottom: $-solid-border;

			.order-sn {
				font-size: $-font-size-nr;
			}

			.order-status {
				margin-left: auto;
				font-size: $-font-size-sm;

				&--primary {
					@include font_color()
				}

				&--muted {
					color: $-color-muted;
				}
			}
		}

		&-main {
			padding: 30rpx;

			.name {
				font-size: 32rpx;
				font-weight: bold;
			}

			.amount {
				color: rgba(64, 115, 250, 1);
				font-size: 28rpx;
			}
		}
	}

	.sort {

		&-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: bold;
			font-size: 32rpx;
			background-color: #FFFFFF;
		}

		&-main {
			padding: 0 30rpx 30rpx 30rpx;

			.sort-sel {
				color: rgba(56, 56, 56, 1);
				background-color: rgba(246, 247, 249, 1);
				font-size: 28rpx;
				padding: 30rpx;
				text-align: center;
				margin-bottom: 15rpx;

				&.selected {
					color: #fff;
					background-color: rgba(64, 115, 250, 1);
				}
			}
		}

		&-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: #fff;

			.btn {
				flex: 1;

				&--cancel {
					color: rgba(38, 38, 38, 1);
				}
			}
		}
	}

	.share-btns {
		position: fixed;
		z-index: 9999999;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(240rpx + constant(safe-area-inset-bottom));
		height: calc(240rpx + env(safe-area-inset-bottom));
		padding: 36rpx 36rpx constant(safe-area-inset-bottom) 36rpx;
		padding: 36rpx 36rpx env(safe-area-inset-bottom) 36rpx;
		background-color: #fff;

		.close {
			position: absolute;
			right: 0;
			top: 0;
			padding: 40rpx;
		}

		.title {
			font-size: 32rpx;
			color: rgba(56, 56, 56, 1);
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.desc {
			font-size: 24rpx;
			color: rgba(128, 128, 128, 1);
			margin-bottom: 20rpx;
		}

		.btns {
			width: 49%;
			padding: 25rpx;
		}

		.share {
			text-align: center;
			background-color: rgba(242, 246, 255, 1);
			color: rgba(64, 115, 250, 1);
		}

		.saveImg {
			text-align: center;
			background-color: rgba(64, 115, 250, 1);
			color: #fff;
		}
	}
</style>